<script lang="ts" setup>
import ClassCard from '@/components/ClassCard.vue'
import { useUserStore } from '@/stores'
import { ClassApi } from '@/apis'

const props = defineProps<{
  status?: number[]
}>()

const userStore = useUserStore()

// 搜索表单
const form = reactive<ClassApi.EnrollClassQuery>({
  studentId: userStore.currentStudent.id,
  classStatus: props.status,
})

const { reload, loadmore, records: classList, status, contentText } = usePagination(page => ClassApi.getEnrollClassPage({ ...form, ...page }))
onReachBottom(() => {
  loadmore()
})

const gotoChangeClass = (item) => {
  uni.setStorageSync('originalClass', JSON.stringify([item]))
  uni.navigateTo({
    url: '/pages/class/change/class',
  })
}

const gotoChangeLesson = (item) => {
  uni.setStorageSync('originalClass', JSON.stringify([item]))
  uni.navigateTo({
    url: '/pages/class/change/lesson',
  })
}

onPullDownRefresh(async () => {
  await reload()
  uni.stopPullDownRefresh()
})

onShow(async () => {
  await reload()
})

onLoad(() => {
  // reload()
})
</script>

<template>
  <view class="bg-[#f8f8f8] px py">
    <view v-for="(item, index) in classList" :key="index" class="mb-[30rpx]">
      <ClassCard :info="item">
        <template #bottom>
          <view class="divider" />
          <view class="mt-[24rpx] flex-row-between-start color-primary">
            <!-- <view class="disabled-color flex-1 text-center">
              退班
            </view>
            <view class="divider-col" />
            <view class="disabled-color flex-1 text-center">
              退课
            </view>
            <view class="divider-col" /> -->
            <view class="flex-1 text-center" @click="gotoChangeClass(item)">
              转班
            </view>
            <view class="divider-col" />
            <view class="flex-1 text-center" @click="gotoChangeLesson(item)">
              调课(余{{ item.enrollment.remainLessonChangeCount || 0 }})
            </view>
          </view>
        </template>
      </ClassCard>
    </view>
    <view v-if="!classList.length">
      <wd-status-tip image="content" tip="暂无内容" />
    </view>
    <uni-load-more v-if="classList.length" :status="status" :content-text="contentText" />
  </view>
</template>

<style lang="scss" scoped>
.divider {
  height: 1px;
  background: #E5E6EB;
}

.disabled-color {
  color: #86909C;
}

.divider-col {
  height: 24rpx;
  width: 1px;
  background: #E5E6EB;
}
</style>
